<template>
  <div class="app-container">
    <el-table
      stripe
      :data="branchInfo"
      style="width: 100%; margin-top: 10px"
      border
    >
      <!-- <el-table-column align="center" width="80px" label="分公司编号">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column> -->
      <el-table-column align="center" width="260px" label="分公司名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <!-- <el-table-column align="center" label="角色" width="120px">
        <template slot-scope="scope" style="margin:0 auto;">
          <div
            v-for="(item, index) in scope.row.role"
            :key="index"
            style="
              text-align: center;
              padding: 3px;
              border-radius: 7px;
              font-size: 10px;
              color: #fff;
              margin: 1px;
              background: cornflowerblue;
              float:left
            "
          >
            {{ item }}
          </div>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="分公司所属科员">
        <template slot-scope="scope">
          <div
            v-for="(item, index) in scope.row.clerk"
            v-show="scope.row.clerk != null"
            :key="index"
            style="
              text-align: center;
              padding: 3px;
              border-radius: 7px;
              font-size: 10px;
              color: #fff;
              margin: 1px;
              background: cornflowerblue;
              float: left;
              letter-spacing: 2px;
            "
          >
            {{ item }}
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" width="200" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
          >分配</el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        ref="pager"
        background
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        :total="total"
        layout="prev, pager, next"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
      />
    </div>

    <el-dialog :visible.sync="dialogVisible" title="分配分公司">
      <el-form :model="clerkInfo" label-width="80px" label-position="left">
        <el-form-item label="姓名 *">
          <el-input v-model="clerkInfo.name" placeholder="请输入姓名" />
        </el-form-item>

        <el-form-item label="科员 *">
          <el-select
            v-model="clerkInfo.clerk"
            placeholder="请选择"
            value-key="id"
            multiple
            @change="handleSelectChange"
          >
            <el-option
              v-for="item in clerkOptions"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" @click="cancelRole">取消</el-button>
        <el-button type="primary" @click="confirmRole">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllUser,
  getAllUserPage,
  deleteUser,
  insertUser,
  updateUser,
  getRoles
} from '@/api/user'
import {
  getClerkInfo,
  getBranch,
  disClerk,
  deleteBranch,
  getAllBranchInfoPage
} from '@/api/branch'
import { getClassify } from '@/api/classify'

export default {
  name: 'PagePermission',
  data() {
    return {
      pageIndex: 1, // 第几页
      pageSize: 2, // 一页数量
      total: 0, // 总页数
      last_page: 0, // 最后一夜
      currentIndex: 0, // 当前页数
      dialogVisible: false, // dialog显示隐藏
      dialogType: '', // dialog的标题
      roles: '', // 角色
      perId: '', // 编辑单个id 变量
      branchInfo: [], // 用户信息
      clerkOptions: '', // 分公司数组
      clerkInfo: {
        name: '',
        clerk: ''
      }
    }
  },
  created() {
    this.getAllBranchInfo()
  },

  methods: {
    handleSelectChange() {
      this.$forceUpdate()
    },
    // 下一页
    sizeChangeHandle: function(size) {
      this.pagesize = size
    },
    currentChangeHandle: function(val) {
      this.currentIndex = val
      return new Promise((resolve, reject) => {
        getAllBranchInfoPage(val).then((response) => {
          // 调用分页方法 下一页 查询
          this.branchInfo = response.data.data
          this.total = response.data.total
          // this.pageSize = response.data.to;
        })
      })
    },
    // 获取全部分公司账号的信息
    getAllBranchInfo() {
      new Promise((reselve, reject) => {
        getBranch().then((response) => {
          // 获取数据显示
          // 将后台拿到的数据转换
          this.branchInfo = response.data.data
          this.total = response.data.total
          this.pageSize = response.data.to
          this.last_page = response.data.last_page
        })
      })
    },

    selectPage() {
      new Promise((reselve, reject) => {
        getBranch().then((response) => {
          this.total = response.data.total
          this.pageSize = response.data.to
          this.last_page = response.data.last_page
        })
      })
    },

    // 提交dialog框
    confirmRole() {
      new Promise((resolve, reject) => {
        disClerk({ clerkInfo: this.clerkInfo }).then((response) => {
          this.dialogVisible = false
          this.clerkInfo.name = ''
          this.clerkInfo.clerk = ''
          this.clerkInfo.id = ''
          this.currentChangeHandle(this.currentIndex)
        })
      })
    },
    // 取消dialog框
    cancelRole() {
      // 关闭dialog框
      this.dialogVisible = false
      // 取消弹框后 清除 表单内容
      this.clerkInfo.name = ''
      this.clerkInfo.clerk = ''
      this.clerkInfo.id = ''
      // this.perId = "";
    },
    // 管理员编辑
    handleEdit($index, row) {
      this.dialogVisible = true
      // 将当前行的id 赋值给perId 后续修改传值id
      // this.perId = row.id;
      this.clerkInfo.name = row.name
      this.clerkInfo.clerk = row.clerk
      this.clerkInfo.id = row.id
      return new Promise((resolve, reject) => {
        getClerkInfo().then((response) => {
          // 填充数据
          this.clerkOptions = response.data.data
        })
      })
    },
    // 权限删除
    handleDelete($index, row) {
      this.$confirm('确认删除?', '警告', {
        configButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warring'
      }).then(() => {
        new Promise((resolve, reject) => {
          deleteBranch({ id: row.id }).then((response) => {
            this.selectPage()
            // console.log(this.total);
            const page =
              this.total % 8 == 1 ? this.last_page - 1 : this.last_page
            // console.log(page);
            this.currentChangeHandle(page)
            this.pageIndex = page
            console.log('pahe' + this.pageIndex)
            // 2020 12 -10 修改
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
  .label_per ul {
    width: 520px;
    height: auto;
    list-style: none;
    padding: 0px;
  }
  // .label_per ul li {
  //   width: 120px;
  //   height: 40px;
  //   float: left;
  // }
}
</style>
